<template>
    <div>
        <!-- <p>{{arr1}}</p> -->
        <div class="ListOne" ref="refAll" v-for="item in arr1" :key="item.Id">
            <div class="tit">
                <p>{{item[0].type_two}}</p>
            </div>
            <div>
                <TowList :list="item"></TowList>
            </div>
        </div>
        <div class="pst">
            <div :class="{list:true,c:co==item}" @click="is(i,item)" v-for="(item,i) in list" :key="i">{{item}}</div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        arr1: Array,
        list: Array,
    },
    data() {
        return {
            co: "",
        };
    },
    mounted() {
        window.addEventListener("scroll", this.scrollEvent, false);
        // this.$refs.forEach((e) => {
        //     // if (sTop > e.offsetTop) {
        //     // }
        //     console.log(e);
        // });
        
        // console.log(this.$refs);
    },

    methods: {
        scrollEvent() {
            var sTop =
                window.pageYOffset ||
                document.documentElement.scrollTop ||
                document.body.scrollTop;
            // console.log(sTop);
        },
        is(i, item) {
            window.scrollTo({
                top: this.$refs.refAll[i].offsetTop,
                behavior: "smooth",
            });
            this.co = item;
        },
    },
    // async updated() {
    //     if (this.$refs) {
    //         // 随便举栗子
    //         let data =await this.$nextTick(function () {
    //             // 调用$nextTick函数
    //             let dom1 = this.$refs.refAll; // o了
    //             // console.log(dom1);
    //             return dom1;
    //         });
    //         console.log(data);
    //     }
    //     // console.log(this.$refs.refAll);
    // },
};
</script>

<style lang="scss" scoped>
.ListOne {
    width: 1200px;
    margin: 0 auto;
    .tit {
        margin-top: 12px;
        text-align: center;
        line-height: 50px;
        background-color: #784cfa;
        opacity: 0.8;
        border-radius: 20%;
        p {
            opacity: 1;
        }
    }
}
.pst {
    position: fixed;
    top: 30%;
    left: 0;
    width: 200px;
    .list {
        line-height: 30px;
        font-size: 18px;
        font-weight: 600;
        text-align: center;
        border-radius: 40%;
        color: #9370fb;
    }
    .list:hover {
        background-color: #9370fb;
        color: wheat;
    }
    .c {
        color: wheat;

        background-color: #9370fb;
    }
}
</style>